<template>
    <view class="page">

        <view class="list">
            <view class="item" v-for="(item, index) in list" :key="index">
                <view class="info">
                    <view class="name">商户：{{ item.shopDetail.username }}</view>
                </view>
                
                <view class="btn">
                    <view @click="toEdit(item)" v-if="item.is_clock == 2">绑定</view>
                    <view @click="del(item)" v-if="item.is_clock == 1">解绑</view>
                </view>
            </view>
        </view>
        <u-empty mode="data" text="暂无数据～" v-if="list.length == 0" style="position: absolute;top: 300rpx;left: 40%;">
        </u-empty>
        <view style="width: 100%;height: 30rpx;"></view>
        <!-- <view class="add" @click="add">+</view> -->
    </view>
</template>

<script>
// 
import { shoprolelistall,loadingabout } from "@/api/user.js"
export default {
    components: {},
    props: {},
    data() {
        return {
            page: 1,
            pageSize: 10,
            list: [],
            code:'',
            mobile:''
        };
    },
    watch: {},
    methods: {
        toDetails() {

        },
        add() {
            uni.navigateTo({ url: '/pages/manufacturer/addCart' })
        },
        getList(mobile) {
            shoprolelistall({
                mobile:this.mobile
            }).then(res => {
                console.log(res.data)
                if (this.page == 1) {
                    this.list = res.data
                } else {
                    this.list = this.list.concat(res.data)
                }
            })
        },
        toEdit(item) {
            let _this = this;
            uni.showModal({
                title: '提示',
                content: '确认绑定吗',
                showCancel: true,
                success: ({ confirm, cancel }) => {
                    if (confirm) {
                        loadingabout({
                            code:_this.code,
                            id:item.id,
                            is_clock:1
                        }).then(res=>{
                            if(res.code == 1){
                                uni.showToast({
                                    title: '绑定成功',
                                    icon: 'none',
                                    mask: true
                                })
                                _this.page = 1;
                                _this.list = []
                                _this.getList()
                            }
                        })
                    }
                }
            })
        },
        del(item) {
            let _this = this;
            uni.showModal({
                title: '提示',
                content: '确认解绑吗',
                showCancel: true,
                success: ({ confirm, cancel }) => {
                    if (confirm) {
                        loadingabout({
                            code:_this.code,
                            id:item.id,
                            is_clock:2
                        }).then(res=>{
                            if(res.code == 1){
                                uni.showToast({
                                    title: '绑定成功',
                                    icon: 'none',
                                    mask: true
                                })
                                _this.page = 1;
                                _this.list = []
                                _this.getList()
                            }
                        })
                    }
                }
            })
        }
    },
    onShow() {
        
    },
    onLoad(option) {
        console.log(option)
        this.mobile = option.phone
        this.code = option.code
        this.getList()

    },
};
</script>
<style scoped lang='scss'>
.page {
    // background-color: #efefef;
    width: 100%;
    min-height: 100vh;
}

.search {
    width: 100%;
    margin: auto;
    margin-top: 30rpx;
    height: 80rpx;
    position: fixed;
    background-color: #fff;
    top: 80rpx;
    z-index: 99999;
}

.list {
    width: 94%;
    margin: auto;
    // margin-top: 120rpx;
}

.item {
    width: 100%;
    min-height: 226rpx;
    background: #FFFFFF;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
    border-radius: 12px 12px 12px 12px;
    margin-top: 30rpx;

    .info {
        width: 94%;
        margin: auto;
        display: flex;
        padding-top: 20rpx;

        .name {
            width: 90%;
            font-size: 26rpx;
            font-weight: 600;
        }

        .status {
            font-size: 26rpx;
            font-weight: 600;
        }

        .a {
            color: green;
        }

        .b {
            color: #dd524d;
        }
    }

    .items {
        width: 94%;
        margin: auto;
        display: flex;
        font-size: 26rpx;
        margin-top: 10rpx;
        color: #666;

        view:nth-child(1) {
            width: 20%;
        }

        view:nth-child(2) {
            width: 40%;
            text-align: center;
        }

        view:nth-child(3) {
            width: 40%;
            text-align: right;
        }

    }

    .btn {
        display: flex;
        margin-top: 30rpx;

        view:nth-child(1) {
            width: 94%;
            height: 46px;
            background: #007aff;
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #D9D9D9;
            margin: auto;
            text-align: center;
            line-height: 46px;
            color: #fff;
        }

        view:nth-child(2) {
            width: 125px;
            height: 46px;
            background: #dd524d;
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #D9D9D9;
            margin: auto;
            text-align: center;
            line-height: 46px;
            color: #fff;
        }
    }

}

.add {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50rpx;
    background-color: $uni-color-primary;
    position: fixed;
    bottom: 120rpx;
    font-size: 44rpx;
    text-align: center;
    line-height: 80rpx;
    color: #fff;
    right: 30rpx;
}
</style>